<template>
  <div class="chart_box">
    <div id="viewYxyjDetail" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
 
<script>
export default {
  name:'viewYxyjDetail',
  props: {
    ecWidth: ''
  },
  data() {
    return {
      option: {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
}
                        
    };
    
  },
 
  mounted() {
    this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕
      this.init();

      });
  },
 
  methods: {
    init() {

      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("viewYxyjDetail"));

      // 绘制图表
      myChart.setOption(this.option);
      window.addEventListener('resize', function () {
      // 改变图表尺寸，在容器大小发生改变时需要手动调用
      myChart.resize();
    });
    },
  },
};
</script>
<style scoped>
.chart_box{
        width: 95%;
        height: 300px; 
        margin: 0 auto;
}
</style>
